Enough scene setting, time to start making style sheets work.
Last time, in How Do Style Sheets Work? we saw that a style sheet is a series of statements. There are several types of statement.
We'll take a quick look at each of these, but the really important one for us is Rules, which we leave for last.
You can think of an @rule as a kind of macro instruction that tells a browser something other than how to draw elements. For our purposes (in CSS1) the only valid @rule is the @import rule. @import tells a browser to import a style sheet from elsewhere and use it in conjunction with the current style sheet. A style sheet with an @import rule is said to cascade from the imported style sheet. This is how the cascade that we saw in Cascading and Inheritance works.
The @import rule has the following format
@import url(http://www.westciv.com/styles/style1);
alternatively, you can use the form
@import "http://www.westciv.com/styles/style1";
The url can be either a local file (in that case you use a relative url) or an absolute url, as in this case.
CSS2 introduced the concept of media, and allows conditional importing of style sheets based on the media that a page is being displayed in. For more on this media conditional importing, see the section on media.
Because human beings have to develop, edit and share style sheets, they can be commented. A comment has the form
/* This is a style sheet comment*/
Comments can be multi-lined.
@media rules were introduced with CSS2. They allow parts of a style sheet to only be used when certain media are being used to display the page. For example, you can create an @media rule that applies only when a page is being printed.
@media rules have the form of the keyword @media, followed by a comma separated list of media names, followed by the rules that are to be applied to this group of media, enclosed in curly brackets. For example, the following rule will only make the background color of the body white when the page is being printed
@media print {
BODY {background-color: white}
}
We'll learn about rules below.
We'll learn more about @media rules in a later section on different media.
@page instructions were introduced with CSS2 to allow better control over printing of pages. An @page instruction has the form of the keyword @page, followed by a number of printing specific rules contained within curly brackets. An example @page rule would be
@page {
margin: 5%
}
We will cover @page instructions in much more detail in the section on printing.
Because older browsers don't support cascading style sheets, to ensure that these browsers don't display a style sheet embedded in them as text, style sheets can include HTML comment tags ( <!-- and -->). You needn't really worry about these. HTML comment tags should not be placed in external style sheets.
Rules or Rule Sets are what we are primarily concerned with. A rule is a statement that tells a browser how to draw a particular element on a web page.
A rule has two parts, a Selector and a Declaration. We are going to look in detail at each of these, as understanding both is essential to working with style sheets.
A selector identifies, or selects the elements on a web page that are affected by the rule.
The declaration then tells a browser how to draw any element on a page that is selected by the selector.
Sounds a little complicated? It's a tricky idea, because it is probably quite different to your experience with style sheets in say a word processor.
Let's take a look at an example or two.
One of the most common elements on a web page is a paragraph. If you are versed in HTML, this is the <P></P> element. A very simple rule could tell a browser how to draw a paragraph.
Suppose we want all of the text in paragraphs to be in the font you are (hopefully) seeing now, verdana. In a style sheet, we want to create a rule which selects paragraphs, or to put it another way, we want to create a paragraph selector. Sounds complicated? Well, below is the paragraph selector
P
Any guesses for the selector to select the body of a document. If you guessed BODY (or body) you were right. Quite simply, it is the tag for that element, minus the < and >.
In addition to selectors for HTML elements (HTML Element Selectors) there are several other important types of selector, which we will be covering in the next section.
Now, our plan was to create a rule that tells a browser to draw paragraphs in a certain font. We've created the selector, but now we need to create a declaration that tells the browser how to draw the selected elements.
Declarations are inside curly braces - { and } - and contain one or more properties, separated by semicolons. In our example, the declaration would be
{font-family: verdana}
And if we were to get really ambitious, and want the text to be red, we would have a declaration like the following
{font-family: verdana; color: red}
Putting the selector and the declaration together, we get the complete statement
P {font-family: verdana; color: red}
In this lesson we took a look at the major building blocks of a style sheet, the different types of statement. We paid a bit of attention to the most important kind of statement, rules, and saw how a rule has a selector which identifies the elements on a page, and a declaration, a set of properties that tells a browser how to draw the selected elements.
If you feel that we raced through this a little, then you are right. We are going to focus a good deal more on both selectors, and properties, in coming lessons.
Next we are going to take a good hard look at Selectors, how they work, and how to use them.
|
|
|
|